<template>
  <div class="nav">
    <el-button icon="Plus" type="primary" @click="openFormVisible('新建',false)">新建</el-button>
    <el-tooltip
        class="box-item"
        effect="dark"
        content="刷新"
        placement="top"
    >
      <el-button :type="'text'" @click="Refresh"><el-icon size="19"><RefreshRight/></el-icon></el-button>
    </el-tooltip>
    <el-tooltip
        class="box-item"
        effect="dark"
        content="密度"
        placement="top"
    >
      <el-dropdown placement="bottom-start" trigger="click" size='large'>
        <el-button type="text"><el-icon size="18"><Sort/></el-icon></el-button>
        <template #dropdown>
          <el-dropdown-menu >
            <el-dropdown-item
                @click="changeSize('紧凑')"
                :style="{backgroundColor:active1===true ?'#E6F7FF' : ''}">
              紧凑
            </el-dropdown-item>
            <el-dropdown-item
                @click="changeSize('默认')"
                :style="{backgroundColor:active2===true ?'#E6F7FF' : ''}">
              默认
            </el-dropdown-item>
            <el-dropdown-item
                @click="changeSize('疏松')"
                :style="{backgroundColor:active3===true ?'#E6F7FF' : ''}">
              疏松
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-tooltip>
    <el-tooltip
        class="box-item"
        effect="dark"
        content="列设置"
        placement="top"
    >
      <el-button type="text"><el-icon size="18"><Setting/></el-icon></el-button>
    </el-tooltip>
  </div>
</template>
<script setup>
import {RefreshRight, Setting, Sort} from "@element-plus/icons-vue";
import {reactive,ref} from "vue";

const dialogFormVisible=ref(false)
const dialogTitle=ref('')
//当为编辑时对数据储存
const selectedRow=ref()
// 打开新建/编辑弹窗
const openFormVisible=(type,row)=>{
  dialogFormVisible.value=true
  if (type==='新建'){
    dialogTitle.value='添加招聘者'
    if (FormRef.value){
      FormRef.value.resetFields();
    }
  }else if (type==='编辑'){
    dialogTitle.value='编辑招聘者'
    //记录当前行数据
    selectedRow.value=row
    //将选中行数据赋值给addBoss
    // addBoss.value={...row}
    //对后端获取的一些数据字段进行判断
    //账号状态判断
    // if (row.enable_status===1){
    //   addBoss.value.enable_status='启用'
    // }else {
    //   addBoss.value.enable_status='禁用'
    // }
    //角色判断
    // if(row.role_id===1){
    //   addBoss.value.role_id='分行招聘者'
    // }else if (row.role_id===2){
    //   addBoss.value.role_id='分行管理者'
    // }else {
    //   addBoss.value.role_id='总行管理者'
    // }
    //分行判断
    // for (let i in companyID){
    //   let object=companyID[i]
    //   if (row.company_id===object.id){
    //     addBoss.value.company_id=object.name
    //     return
    //   }else {
    //     addBoss.value.company_id=''
    //   }
    // }
  }
}
//loading区域加载
const loading = ref(true)
//刷新
const Refresh= () => {
  loading.value=true
  // AllRecruiterList()
}
//密度
const tableSize=ref('default')
const active1=ref(false)
const active2=ref(true)
const active3=ref(false)
const changeSize = (size) => {
  if (size === '紧凑') {
    tableSize.value = 'small'
    active1.value = true
    active2.value = false
    active3.value = false
  } else if (size === '默认') {
    tableSize.value = 'default'
    active1.value = false
    active2.value = true
    active3.value = false
  } else if (size === '疏松') {
    tableSize.value = 'large'
    active1.value = false
    active2.value = false
    active3.value = true
  } else {
    tableSize.value = 'default'
    active1.value = false
    active2.value = true
    active3.value = false
  }
}
</script>

<style scoped lang="scss">
.nav{
  height: 50px;
  float: right;
  /*刷新、密度、列设置样式*/
  :deep(.el-button--text){
    color: #1F1F1F;
    margin: 0 5px;
  }
  :deep(.el-button--text:hover){
    color:#409EFF;
  }
}
</style>